<template>
	<view class="u-p-b-30">
		<view class="u-relative" style="height: 430rpx;">
			<u-image src="/static/img/work/work.jpg" width="100%" height="350"></u-image>
			<view class="top-grid-box u-flex u-absolute" :class="{'w-fix-top': topindex>=headerH}">
				<view class="top-grid-item u-flex-1" v-for="(item, i) in topGridList" :key="i" @click="toFlowPage(i)">
					<view>
						<u-image class="top-grid-icon" width="60" height="60"
							:src="`/static/icons/${item.icon}-icon.png`"></u-image>
					</view>
					<view class="top-grid-label">
						{{item.label}}
					</view>
				</view>
			</view>
		</view>
		<apply-grid title="常用应用"
		 :list="usedApplay"
		  bgJson editType="0" 
		  @item-click="toPage"></apply-grid>
		<apply-grid title="常用工作" :list="usedWork" editType="1" @item-click="toForm"></apply-grid>
		<apply-grid title="所有应用" :list="this.$store.state.vuex_user.menuList||[]" bgJson @item-click="toPage">
		</apply-grid>
		<apply-grid title="所有工作" :list="this.$store.state.vuex_user.flowFormList||[]" @item-click="toForm"></apply-grid>
	</view>
</template>

<script>
	import ApplyGrid from './components/apply-grid.vue'

	export default {
		components: {
			ApplyGrid
		},
		data() {
			return {
				topGridList: [{
						icon: 'sponsor',
						label: '我发起的'
					},
					{
						icon: 'backlog',
						label: '待办事项'
					},
					{
						icon: 'done',
						label: '已办事项'
					},
					{
						icon: 'carbon',
						label: '抄送我的'
					}
				],
				usedWork: [],
				usedApplay: [],
				topindex: 0,
				headerH: 141
			}
		},
		methods: {
			// 应用跳转
			toPage(pItem) {
				console.log("即将跳转的",pItem)
				if (pItem.urlAddress.indexOf('http') === -1) {
					this.$u.route(pItem.urlAddress)
				} else {
					// this.$store.state.vuex_user.employNo
					console.log(pItem.urlAddress + this.$store.state.vuex_user.userInfo.employNo)
					this.$u.route('pages/work/apps', {
						home_url: pItem.urlAddress + this.$store.state.vuex_user.userInfo.employNo
					})
				}
			},
			toForm(pForm) {
				console.log(pForm)
				if (pForm.formType === 2) {
					this.$u.route('pages/work/flowchart/dynamic/index', {
						id: pForm.id,
						title: pForm.fullName
					})
				}
			},
			toFlowPage(pI) {
				const flowpages = ['pages/work/flowchart/started', 'pages/work/flowchart/backlog',
					'pages/work/flowchart/processed', 'pages/work/flowchart/cc-me'
				]
				this.$u.route(flowpages[pI])
			}
		},
		// onShow() {
		// 	uni.pageScrollTo({
		// 		scrollTop: 0
		// 	})
		// },
		onLoad() {
			let _used_apply_key = ['打卡', '吃饭', '重点工作']
			let _used_work_key = ['请假申请', '休班申请', '公出申请', '补签申请']
			const _flowFormList = this.$store.state.vuex_user.flowFormList || []
			const _menuList = this.$store.state.vuex_user.menuList || []
			if (this.$store.state.vuex_used_work) {
				this.usedWork = this.$store.state.vuex_used_work
			} else {
				this.usedWork = _flowFormList.filter(item => {
					return _used_work_key.indexOf(item.fullName) !== -1
				})
				this.$u.vuex('vuex_used_work', this.usedWork)
			}
			if (this.$store.state.vuex_used_apply) {
				this.usedApplay = this.$store.state.vuex_used_apply
			} else {
				// 常用应用过滤出缓存存在的
				this.usedApplay = _menuList.filter(item => {
					return _used_apply_key.indexOf(item.fullName) !== -1
				})
				
				this.$u.vuex('vuex_used_apply', this.usedApplay)
			}
			console.log(this.$u)
		},
		onPageScroll(e) {
			this.topindex = e.scrollTop
		}
	}
</script>

<style lang="scss" scoped>
	.top-grid-box {
		margin: auto;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx 0;
		width: 96%;
		border-radius: 20rpx;
		background-color: #FFFFFF;

		.top-grid-item {
			text-align: center;

			.top-grid-icon {
				display: inline-block;
			}

			.top-grid-label {
				font-size: 24rpx;
			}
		}
	}

	.top-grid-box.w-fix-top {
		position: fixed;
		width: 100%;
		top: 0;
		bottom: auto;
		border-radius: 0;
		z-index: 999;
	}
</style>
